<!--  -->
<template>
  <div>
 <div id="container"></div>


 
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  
            infoWindow: "",
                map: "",//地图实例化对象
                info: [],//信息窗体的内容
                show:true,
                content:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods:{
    initMap(){
      let self = this;
      let arr = [[119.00755405426027,25.443880866278544],[119.00725405426027,25.443880866278544],
      [119.00685405426027,25.443202856278544],[119.00645405426027,25.443202856278544], [119.00678005426027,25.442552856278544],
    [119.011565,25.445793],[119.011265,25.445793],[119.011565,25.446093]];
      let arr2 = ['凤达学生公寓F','凤达学生公寓E','凤达学生公寓B','凤达学生公寓D','凤达学生公寓C','三路楼','雪津楼','学生公寓'];
        AMapLoader.load({
            key:"0bc8c53b86319175f47502e3a72d2018",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:17,           //初始化地图级别
               // 25.44543265237217,119.00939807295802
                center:[119.00755405426027,25.443431866278544], //初始化地图中心点位置
                
            });

    



           // 循环所有的标记点
        for( let i =0; i <  arr.length; i++) {
          var marker = new AMap.Marker({
          position: arr[i],                                        // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map:this.map,
          isCustom: true,
          title : arr2[i],
     
          //icon:'//vdata.amap.com/icons/b18/1/2.png',
          content: self.createInfoWindow(arr[i],arr2[i]),
        });
      
// 给地图实例绑定点击事件 onClick

 

        }

        
//         var infoWindow = new AMap.InfoWindow({
//         anchor: 'top-left',
//         content: '这是信息窗体111！',
// });

// infoWindow2.open(this.map,[119.00765405426027,25.443780866278544]);

        }).catch(e=>{
            console.log(e);
        })

       
    },
     createInfoWindow (name,row){
  
     let content = [
       `<div style="width:150px;height: 90px; 
       border: 1px solid  #929292;border-radius:5px;
       background-color: #FEFEFE;" >
       <div>楼栋：<span>雪津楼</span></div>
       <div>辅导员：<span>张三</span></div>
       <div>电话：<span>18252156911</span></div>
       <div>宿舍人数：<span>756</span></div>
 
</div>`]
    return content;
},


},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.initMap();
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>